<div class="layui-tab layui-tab-brief">
    <ul class="layui-tab-title site-demo-title">
        <li class="layui-this detail-page"></li>
    </ul>
    <div class="main-content"></div>
</div>
<script>
    $(".layui-this.detail-page").html($.i18n.prop('client.list'));
    window.clientList = [];
    api_invoke("/config/detail", {}, function (data) {
        if (data.code == 20000) {
            clientList = data.data;
            var html = template($("#client-tpl").html(), data);
            $(".main-content").html(html);
            $(".mapping-config").click(function () {
                window.clientIndex = $(this).attr("data-index");
                load_page("html/lan/list.html");
            });
            $(".client-edit").click(function () {
                window.clientIndex = $(this).attr("data-index");
                load_page("html/client/edit.html");
            });
            $(".client-delete").click(function () {
                window.clientIndex = $(this).attr("data-index");
                layer.confirm($.i18n.prop('public.confirm.delete'), {
                    title: $.i18n.prop('public.tips'),
                    btn: [$.i18n.prop('public.ok'), $.i18n.prop('public.cancel')]
                }, function (i) {
                    layer.close(i);
                    clientList.splice(clientIndex, 1);
                    api_invoke("/config/update", clientList, function (data) {
                        if (data.code != 20000) {
                            layer.alert(data.message);
                        } else {
                            location.reload();
                        }
                    })
                });
            });
        } else {
            alert(data.message);
        }
    });
</script>
<script id="client-tpl" type="text/html">
    <table class="layui-table" lay-skin="line">
        <thead>
        <tr>
            <th class="th-client-name"><%:=$.i18n.prop('client.name')%></th>
            <th class="th-client-key"><%:=$.i18n.prop('client.key')%></th>
            <th class="th-status"><%:=$.i18n.prop('client.status')%></th>
            <th class="th-options"><%:=$.i18n.prop('public.options')%></th>
        </tr>
        </thead>
        <tbody>
        <%for(var i = 0; i < data.length; i++) {%>
        <tr>
            <td><%:=data[i].name%></td>
            <td><%:=data[i].clientKey%></td>
            <td>
                <% if(data[i].status == 1){ %>
                <span class="layui-badge layui-bg-green"><%:=$.i18n.prop('client.status.online')%></span>
                <% } else { %>
                <span class="layui-badge layui-bg-gray"><%:=$.i18n.prop('client.status.offline')%></span>
                <% }%>
            </td>
            <td>
                <a data-index="<%:=i%>"
                   class="layui-btn layui-btn-mini client-edit"><%:=$.i18n.prop('public.edit')%></a>
                <a data-index="<%:=i%>" class="layui-btn layui-btn-danger layui-btn-mini client-delete"><%:=$.i18n.prop('public.delete')%></a>
            </td>
        </tr>
        <%}%>
        </tbody>
    </table>
</script>
